import React,{createRef,useRef,useState} from 'react';
/**
 * createRef每次渲染都会返回一个新的值{current:null}
 * useRef 每次渲染的时候只要第一个是新值，后面的值会保持不变，除非你手工修改
 * @returns 
 */
function TextInputWithFocusButton(){
  let inputRef = useRef('老标题');//{current:null}
  let [count,setCount] = useState(0);
  //let inputRef = createRef();//{current:null}
  //1.上一次赋的值，下一次渲染可以还获取到
  //2.它的值可以修改，但是修改后并不会让组件重新渲染，不会让页面刷新
  console.log('inputRef.current',inputRef.current)
  //Too many re-renders. React limits the number of renders to prevent an infinite loop.
  //太多的重新渲染了，React限制了重新渲染的数量以避免无限循环
 // setCount(count=>count+1)
  return (
	<div>
		<p>{count}</p>
		<button onClick={()=>setCount(count=>count+1)}>+</button>
		<p>{inputRef.current}</p>
		<button onClick={()=>{inputRef.current='新标题'}}>修改inputRef</button>
	</div>
  )
}
export default TextInputWithFocusButton;
